<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改图书</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
</head>

<body>
  <h2>修改图书</h2>
  <div id="form"></div>

  <button id="btn">提交</button>

  <script id="form-content" type="text/html">
    <input type="hidden" name="_id" value="<%=book._id%>" id="_id">
    书名: <input type="text" name="name" value="<%=book.name%>" id="name"><br/>
    作者: <input type="text" name="author" value="<%=book.author%>" id="author"><br/>
    价格: <input type="text" name="price" value="<%=book.price%>" id="price"><br/>
  </script>

  <script>
    /* 
    读取query参数指定参数名的值
    */
    // function getQueryVal (name){
    //   // location.href  当前的url地址
    //   let str = location.href.split('?')[1].split('&')
    //   const obj = str.reduce((prev,cur)=>{
    //     const [key , value] = cur.split('=')
    //     prev[key] = value
    //     return prev
    //   },{}) 
    // }
    function getQueryVal (name) {
      var str = location.href.split('?');
      var query = str[1];
      var vars = query.split('&');
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == name) {
          return pair[1];
        }
      }
      return (false);
    }
    async function getBook () {
      const id = getQueryVal('id')
      // 发送请求
      const response = await axios(`http://localhost:8080/book/${id}`)
      const book = response.data.data
      const html = template('form-content', { book })
      document.querySelector('#form').innerHTML = html
    }
    getBook()

    document.querySelector('#btn').onclick = async () => {
      // 收集数据
      const _id = document.getElementById('_id').value
      const name = document.getElementById('name').value
      const author = document.getElementById('author').value
      const price = document.getElementById('price').value
      await axios({
        url: 'http://localhost:8080/book',
        method: 'PUT',
        data: { _id, name, author, price }
      })
      // 成功后, 跳转到books页面
      window.location = '/client/books.html'
    }

  </script>

</body>

</html>